import './index.scss'
import {Col,Row} from "antd";
import {
    CheckOutlined
} from '@ant-design/icons';
import store from "../../../store";
import {observer} from 'mobx-react'
import {useEffect} from "react";

const SelectAuthorList = ({author,setAuthor}) => {
    useEffect(()=>{
            store.Author.getAllauthor(1)
    },[])
    return <Row gutter={[16, 24]} id="selectAuthorList">
            <>
                {store.Author.authordata.map((v, i) => <Col span={4} key={i}>
                    <div className={author===v.writerName?'tagActive':'tag'} onClick={()=> {
                        if (author===v.writerName){
                            setAuthor('')
                        }else {
                            setAuthor(v.writerName)
                        }
                    }}>
                        {v.writerName}
                        {author===v.writerName?<CheckOutlined className={"icon"}/>:''}
                    </div>
                </Col>)}
            </>
    </Row>
}
export default observer(SelectAuthorList)